<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="fonts/icomoon.css">
  <link rel="stylesheet" href="css/index2.css">
</head>

<body>
  <div class="container">
    <div class="column">
      <!-- 设备概览区域 -->
      <div class="panel overview">
        <div class="inner">
          <div class="item">
            <p>2,190</p>
            <span><i class="icon-dot"></i>设备总数</span>
          </div>
          <div class="item">
            <p>190</p>
            <span><i class="icon-dot"></i>季度新增</span>
          </div>
          <div class="item">
            <p>3,001</p>
            <span><i class="icon-dot"></i>运营设备</span>
          </div>
          <div class="item">
            <p>108</p>
            <span><i class="icon-dot"></i>异常设备</span>
          </div>
        </div>
      </div>


      <div class="panel monitor">
        <div class="inner">
          <div class="tabs">
            <a href="javascript:" class="active">故障设备监控</a>
            <span>|</span>
            <a href="javascript:">异常设备监控</a>
          </div>

          <div class="content active">
            <div class="title">
              <span>故障时间</span>
              <span>故障地址</span>
              <span>故障代码</span>
            </div>

            <div class="carousel">
              <ul>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>20001</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>20002</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>20003</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>20004</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>20005</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>20006</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>20007</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>20008</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>20009</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>200010</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>200011</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>200012</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>200013</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>200014</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>传智播客黑马程序员前端学院72期</span>
                  <span>200015</span>
                </li>
              </ul>
            </div>
          </div>

          <div class="content">
            <div class="title">
              <span>异常时间</span>
              <span>异常地址</span>
              <span>异常代码</span>
            </div>

            <div class="carousel">
              <ul>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>200001</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>200002</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>200003</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>200004</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>200005</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>200006</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>200007</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>200008</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>200009</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>2000010</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>2000011</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>2000012</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>2000013</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>2000014</span>
                </li>
                <li>
                  <span>20210531</span>
                  <span>深圳市宝安区石岩街道创维创新谷DDSFSDKJFGHDS</span>
                  <span>2000015</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="panel point-user">
        <div class="inner">
          <h3>点位分布统计</h3>
          <div class="detail">
            <div class="echarts"></div>
            <div class="data">
              <div class="item">
                <p>320,11</p>
                <span><i class="icon-dot"></i>点位分布</span>
              </div>
              <div class="item">
                <p>418</p>
                <span><i class="icon-dot"></i>本月新增</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="map">
        <h3><i class="icon-cube"></i>设备数据统计</h3>
        <div class="echarts"></div>
      </div>

      <div class="panel point-user">
        <div class="inner">

          <h3>全国用户总量统计</h3>
          <div class="detail">
            <div class="echarts"></div>
            <div class="data">
              <div class="item">
                <p>120,899</p>
                <span><i class="icon-dot"></i>用户总量</span>
              </div>
              <div class="item">
                <p>248</p>
                <span><i class="icon-dot"></i>本月新增</span>
              </div>

            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="column">

      <div class="panel order">
        <div class="inner"></div>
      </div>

      <div class="panel sales">
        <div class="inner"></div>
      </div>

      <div class="chan-pro clearfix">

        <div class="panel channel fl">
          <div class="inner"></div>
        </div>

        <div class="panel progress fr">
          <div class="inner"></div>
        </div>

      </div>


      <div class="panel hot">
        <div class="inner"></div>
      </div>
    </div>
  </div>
</body>

</html>